<template>
	<view class="venueForm">
		<view>
			<view>
				<view style="font-size: 33rpx;color: #444444;font-weight: 600;line-height: 45rpx;"><text class="required">*</text>请上传身份证</view>
				<view style="color: #888888;font-size: 26rpx;line-height: 60rpx;">请拍摄上传您的中国第二代居民身份证原件</view>
			</view>
			<u-row gutter="10" >
				<u-col span="6">
					<view>
						<u-upload name="idFront" :fileList="idFrontList" @afterRead="onUpload($event, 'idFront')"
							@delete="onDelete($event, 'idFront')" :maxCount="1" width="300" height="200">
							<view class="upload">
								<view class="picture" style="width: 300rpx;height: 200rpx;">
									<image src="../../../../static/image/ex1.png"  style="width: 100%;height: 400rpx;" mode="widthFix"></image>
								</view>
							</view>
						</u-upload>
						<view class="text" style="font-size: 31rpx;color:#888888;text-align: center;line-height: 50rpx; ">上传身份证正面照</view>
					</view>
				</u-col>
				<u-col span="6">
					<view>
						<u-upload name="idBack" :fileList="idBackList" @afterRead="onUpload($event, 'idBack')"
							@delete="onDelete($event, 'idBack')" :maxCount="1"  width="300" height="200">
							<view class="upload">
								<view class="picture" style="width: 300rpx;height: 200rpx;">
									<image src="../../../../static/image/ex2.png"  style="width: 100%;height: 400rpx;" mode="widthFix"></image>
								</view>
							</view>
						</u-upload>
						<view class="text" style="font-size: 31rpx;color:#888888;text-align: center;line-height: 50rpx;">上传身份证反面照</view>
					</view>
				</u-col>
			</u-row>
		</view>
		
		<view class="height30"></view>
		<view>
			<view class="form-row">
				<view class="ftitle"><text class="required">*</text>真实姓名</view>
				<input class="fvalue" clearable placeholder="输入真实姓名" v-model="venueForm.manager" />
			</view>
		</view>
		<view class="height30"></view>
		<view>
			<view class="form-row"  @click="pickerLocal.showLocal = true" >
				<view class="ftitle"><text class="required">*</text>所属区域</view>
				<view class="fvalue" >{{  (pickerLocal.local === '' ? '选择省/市/区' : pickerLocal.local) }}</view>
			</view>
		</view>
		<view class="height30"></view>
		<view>
			<view class="form-row"  @click="onLink('/pagesWorkbenches/pages/venue/selectPage/selectPage')" >
				<view class="ftitle">绑定场馆</view>
				<view class="fvalue" >{{  (venueForm.venueName === '' ? '选择绑定的场馆' : venueForm.venueName) }}</view>
				<view style="width: 100rpx;" @click.stop="clearSelectVenue" v-if="venueForm.venueName">
					<u-icon name="close-circle-fill" color="#999999" size="40"></u-icon>
				</view>
			</view>
		</view>
		<view class="height30"></view>
		<view>
			<view class="form-row">
				<view class="ftitle"><text class="required">*</text>手机号码</view>
				<input class="fvalue" clearable placeholder="输入手机号码"  v-model="venueForm.contactInfo"  />
			</view>
		</view>
		<view class="height30"></view>
		<view>
			<view class="form-row">
				<view class="ftitle"><text class="required">*</text>验证码</view>
				<input class="fvalue" clearable placeholder="输入短信验证码"  v-model="venueForm.code"  />
				<view style="width: 100px;text-align: center;font-size: 32rpx;color: #f77d15;" @click="getCode">{{ smsData.getCodeText }}</view>
			</view>
		</view>
		<view class="height30"></view>
		<view>
			<view class="form-row">
				<view class="ftitle"><text class="required">*</text>登录账号</view>
				<input class="fvalue" clearable placeholder="输入登录账号"  v-model="venueForm.account"  />
			</view>
		</view>
		<view class="height30"></view>
		<view >
			<view class="form-row">
				<view class="ftitle"><text class="required">*</text>登录密码</view>
				<input class="fvalue" clearable v-model="venueForm.password" type="password" placeholder="输入登录密码"  />
			</view>
		</view>
		<view class="height30"></view>
		<view>
			<button class="submitBtn" @click="formSubmitBtn">提交申请</button>
		</view>
		
		 <u-picker
		      @cancel="pickerLocal.showLocal = false"
		      @close="pickerLocal.showLocal = false"
		      :show="pickerLocal.showLocal"
		      :columns="pickerLocal.addressColumns"
		      @confirm="localConfirm"
		      title="请选择所属区域"
		      keyName="name"
		      itemHeight="80"
		      closeOnClickOverlay
		      ref="uPicker"
		      @change="changeHandler"
		      :defaultIndex="pickerLocal.defaultAddress"
		      immediateChange
		    ></u-picker>

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				idFrontList: [],
				idBackList: [],
				//场馆主注册申请表单
				venueForm: {
					//姓名
					manager: '',
					//手机号码
					contactInfo: '',
					//身份证正面
					idFrontImg: '',
					//身份证反面
					idReverseImg: '',
					//登录账号
					account: '',
					//登录密码
					password: '',
					//短信验证码
					code: '',
					//部门机构
					createDept: '',
					//区域地址
					address: '',
					//绑定的场馆名称
					venueName: '',
					//绑定的场馆ID
					venueId: ''
				},
				smsData: {
					getCodeText: '获取',
					getCodeBtnDisabled: false
				},
				pickerLocal:{
					//区域
					local: '',
					//展示弹出层
					showLocal: false,
					//数据数组
					addressColumns: [],
					//默认选中
					defaultAddress: [],
					//原始数据
					addressData: []
				}
			}
		},
		onLoad() {
			this.fetchAddressList();
		},
		methods: {
			fetchAddressList() {
				this.$request({
					url: '/blade-client-business/app/organization/list',
					data: {}
				}).then(res => {
					if (res?.code === 200) {
						const {
							data
						} = res;
						var addressData = data[0];
						this.pickerLocal.addressData = [addressData];
						// this.pickerLocal.local = addressData.deptName+"-"+addressData.children[0].deptName+"-"+addressData.children[0].children[0].deptName;
						this.addressPickData();
					}
				})
			},
			addressPickData(){
				//省的数组
				const provinceData = this.pickerLocal.addressData.map(e => {
					return { name: e.deptName, code: e.id }//这里可以直接return e.name  这里我是要用到code所以才用对象包起来的 下面的市 区 也一样
				})
				console.log("provinceData",provinceData);
				//市的数组
				const cityData = this.pickerLocal.addressData.map(e => {
					const arr = []
					arr.push(
					  e.children.map(c => {
						return { name: c.deptName, code: c.id }
						  
					  })
					)
					return arr
				})
				//区的数组
				const areaData = this.pickerLocal.addressData.map(e => {
					const arr = []
					arr.push(
					  e.children.map(c =>
						c.children.map(d => {
						  return { name: d.deptName, code: d.id }
						})
					  )
					)
					return arr
				})
				console.log("areaData",areaData);
				const arr = [provinceData, cityData[0][0], areaData[0][0][0]]
				console.log("pickerLocal.addressData", this.pickerLocal.addressData);
				this.pickerLocal.addressColumns = arr    //将得到的3个数组 的第一个市的所有数据赋值 作为初始数据
				 
			},
			changeHandler(e) {
				//分别表示选中的列 , 该列的第几个,选中的3列的第几个的数组,组件本身
				const { columnIndex, index, indexs, picker = this.$refs.uPicker } = e
			   //如果改变的是第一列
				if (columnIndex === 0) {
				  const children1 = this.pickerLocal.addressData[index].children.map(e => {
					return { name: e.deptName, code: e.id }
				  })
				  picker.setColumnValues(1, children1)
				//更换 第二列数据
				  const children2 = this.pickerLocal.addressData[index].children[indexs[1]].children.map(e => {
					return { name: e.deptName, code: e.id }
				  })
				  picker.setColumnValues(2, children2)
				//更换 第三列数据
				}
				if (columnIndex === 1) {
					//如果改变的是第二列
				  const children3 = this.pickerLocal.addressData[indexs[0]].children[indexs[1]].children.map(e => {
					return { name: e.deptName, code: e.id }
				  })
				  picker.setColumnValues(2, children3)
					//更换 第三列数据
				}
			},
			localConfirm(e) {
				//显而易见 不多赘述
				this.pickerLocal.local = `${e.value[0].name}-${e.value[1].name}-${e.value[2].name}`
				// this.pickerLocal.localCode = `${e.value[0].code}-${e.value[1].code}-${e.value[2].code}`
				
				this.venueForm.createDept = e.value[2].code;
				this.pickerLocal.showLocal = false
			},
			//已经知道了 this.local ='省-市-区'初始弹窗时默认选中改值
			
			backfill() {
				var temp = this.pickerLocal.local.split('-')
				let index,
				  index1,
				  index2 = 0
				let arr,
				  arr1,
				  arr2 = []
				//匹配省市区对应每列的第几个
				this.pickerLocal.addressData.forEach((item, i) => {
				  if (item.name == temp[0]) {
					index = i
					item.children.forEach((val, ind) => {
					  if (val.name == temp[1]) {
						index1 = ind
						val.children.forEach((e, n) => {
						  if (e.name == temp[2]) {
							index2 = n
						  }
						})
					  }
					})
				  }
				})
				arr = this.pickerLocal.addressData.map(e => {
				  return { name: e.name, code: e.code }
				})
				arr1 = this.pickerLocal.addressData[index].children.map(e => {
				  return { name: e.name, code: e.code }
				})
				arr2 = this.pickerLocal.addressData[index].children[index1].children.map(e => {
				  return { name: e.name, code: e.code }
				})
				//反推出3列的数组数据
				this.pickerLocal.addressColumns = [arr, arr1, arr2]
				// 赋值给 默认初始选中 
				this.pickerLocal.defaultAddress = [index, index1, index2]
			},

			// 获取验证码start
			Timer() {},
			getCode() {
				if(this.smsData.getCodeBtnDisabled){
					return ;
				}
				if(!this.venueForm.contactInfo){
					uni.$u.toast("请输入手机号码后获取")
					return ;
				}
				uni.showLoading({
					title: '发送中...',
					mask: true
				})
				this.$request({
					url: '/blade-merchant-app/merchant-app/sms/send',
					type: 'POST',
					data: { phone: this.venueForm.contactInfo }
				}).then(res => {
					setTimeout(() => {
						if (res?.code === 200) {
							uni.$u.toast("短信发送成功");
							this.smsData.getCodeBtnDisabled = true;
							this.setTimer(); //调用定时器方法
						} else{
							uni.$u.toast(res.msg);
						}
					}, 2000)
				})
			},
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.smsData.getCodeText = "60s"
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.smsData.getCodeBtnDisabled = false
						this.smsData.getCodeText = "获取"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.smsData.getCodeText = holdTime+"s"
					holdTime--;
				}, 1000)
			},
			// 按钮恢复原样
			getcodeDefault(){
				// 清除定时器
				clearInterval(this.Timer); 
				this.smsData.getCodeText = '获取'
				this.smsData.getCodeBtnDisabled = false
			},
			
			// 上传文件
			onUpload(files, type) {
				const {
					file
				} = files;
				let index = this[`${type}List`].length;
				this[`${type}List`].push({
					...file,
					status: 'uploading',
					message: '上传中'
				})
				this.$utils.onUploadFile(file.url)
					.then(res => {
						let item = this[`${type}List`][index];
						this[`${type}List`].splice(index, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: res.data.link
						}))
					})
			},
			// 删除图片
			onDelete(e, type) {
				this[`${type}List`].splice(e.index, 1);
			},
			//提交注册申请
			formSubmitBtn(){
				
				
				if(this.idFrontList.length <= 0){
					uni.$u.toast("请上传身份证正面图")
					return ;
				}
				if(this.idBackList.length <= 0){
					uni.$u.toast("请上传身份证发面图")
					return ;
				}
				
				if(!this.venueForm.manager){
					uni.$u.toast("请输入您的姓名")
					return ;
				}
				if(!this.venueForm.createDept){
					uni.$u.toast("请选择所属区域")
					return ;
				}
				
				if(!this.venueForm.contactInfo){
					uni.$u.toast("请输入手机号码")
					return ;
				}
				if(!this.venueForm.code){
					uni.$u.toast("请输入验证码")
					return ;
				}
				if(!this.venueForm.account){
					uni.$u.toast("请输入登录账号")
					return ;
				}
				if(!this.venueForm.password){
					uni.$u.toast("请输入登录密码")
					return ;
				}
				
				let that=this
				uni.showModal({
					title: '提示',
					content: '确认是否提交注册申请?',
					success: function(res) {
						if (res.confirm) {
							that.venueManagerApply();
						}
					}
				});
				
			},
			//提交申请
			venueManagerApply(){
				const params = this.venueForm;
				params.idFrontImg = this.idFrontList[0].url;
				params.idReverseImg = this.idBackList[0].url;
				
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				this.$request({
					url: '/blade-merchant-app/merchant-app/venue/manager/apply',
					type: 'POST',
					data: params
				}).then(res => {
					uni.hideLoading();
					if (res?.code === 200) {
						
						uni.showModal({
						   title: '申请成功',
						   content: '请等待1-3个工作日审批，审批结果将以短信的形式通知您',
						   showCancel: false,
						   success: function (res) {
							   if (res.confirm) {
								   uni.navigateBack()
							   }
						   }
						});
						
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			//场馆选择后回调
			selectPageReturn(venueId,venueName){
				this.venueForm.venueId = venueId;
				this.venueForm.venueName = venueName;
			},
			//清空已选的场馆
			clearSelectVenue(){
				this.venueForm.venueId = '';
				this.venueForm.venueName = '';
			},
			onLink(url) {
				uni.navigateTo({ url: url })
			}
		}
	}
</script>

<style lang="scss">
		
		.venueForm {
			padding: 40rpx;
			
			.form-row {
				border-radius: 8rpx;display: flex;border: 1px solid #c3c3c3;justify-content: center;align-items: center; 
				
				.ftitle {
					text-align: center;
					font-size: 30rpx;
					width: 200rpx;
					display: inline-table;
					color: #333333;
					padding:0rpx 10rpx;
				}
				.fvalue {
					height: 90rpx;width: 100%;font-size: 32rpx;padding-right: 20rpx;line-height: 90rpx;overflow: hidden;
					
					.resp {
						height: 88rpx;width: 100%;font-size: 32rpx;padding-right: 20rpx
					}
				}
			
			}
			
			.height30 {
				height: 30rpx;
			}
			
			.submitBtn {
				height: 90rpx;background-color: #0544ab;color: #ffffff;line-height: 90rpx;font-size: 32rpx;
			}
			
		}
		.required {
			color: red;
		}
 

</style>
